import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import createPersistedState from "vuex-persistedstate";

Vue.use( Vuex )

// https://webpack.js.org/guides/dependency-management/#requirecontext
const modulesFiles = require.context( './modules', true, /\.js$/ )

// you do not need `import app from './modules/app'`
// it will auto require all vuex module from modules file
const modules = modulesFiles.keys()
    .reduce( ( modules, modulePath ) => {
    // set './app.js' => 'app'
        const moduleName = modulePath.replace( /^\.\/(.*)\.\w+$/, '$1' )
        const value = modulesFiles( modulePath )
        modules[ moduleName ] = value.default
        return modules
    }, {} );

const persisted_state = new createPersistedState( {
    reducer( state )
    {
        return {
            user : {
                token : state.user.token,
                csrf_token : state.user.csrf_token,
            }
        }
    },
    // storage: {
    //     getItem: key => Cookies.get(key),
    //     setItem: (key, value) => Cookies.set(key, value),
    //     removeItem: key => Cookies.remove(key)
    // }
} );

const store = new Vuex.Store( {
    modules,
    getters,
    plugins: [ persisted_state ]
} )

export default store
